<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            /* 固定定位以html视口(view port)为参照物
            紧贴四个边,实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <!-- lorem*50 -->
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolor dolore doloribus iure, labore
            placeat possimus rem! Ad debitis earum ex facere, impedit perferendis quisquam sequi suscipit? Incidunt,
            recusandae, tempora.
        </div>
        <div>Alias atque cupiditate eius eligendi itaque voluptates. Cupiditate dignissimos earum esse hic iusto,
            laudantium maiores odio, pariatur quod tempora ullam voluptas voluptatem. Consequuntur, ducimus, fugiat!
            Aspernatur magnam omnis possimus repellendus.
        </div>
        <div>Accusantium facilis numquam placeat sequi tenetur. Accusantium doloribus ducimus, eaque eligendi eos
            impedit inventore magnam nostrum reiciendis rem, unde, voluptatibus? Architecto doloremque eaque enim
            quisquam sed, similique. Officiis quasi, quibusdam.
        </div>
        <div>Adipisci consequatur, cupiditate dolor dolores dolorum est eum harum incidunt itaque laudantium mollitia
            nobis nulla numquam odit pariatur provident quae quam qui ratione, reiciendis ullam veritatis voluptas.
            Ipsum, possimus, tempora.
        </div>
        <div>Eveniet nulla quae quaerat saepe veritatis voluptatem. Eos minima nulla obcaecati perferendis quasi. Animi
            debitis esse est fugit itaque minima nihil non odio officiis optio, praesentium, qui, quis voluptates
            voluptatum.
        </div>
        <div>Aliquid amet assumenda culpa cumque cupiditate, dolor earum eligendi est fugiat id illum iste laudantium
            maxime obcaecati officia quae repellendus sed temporibus! Amet asperiores at cumque ducimus molestiae nihil
            veniam?
        </div>
        <div>Adipisci aliquid commodi cupiditate distinctio doloribus ducimus eius eos eveniet, id inventore ipsa itaque
            iusto laboriosam laborum maxime, modi nemo nesciunt, omnis pariatur praesentium reiciendis repellendus sit
            sunt tempora veritatis.
        </div>
        <div>Delectus dignissimos, dolor dolores expedita fuga fugiat mollitia neque nihil non officiis, provident,
            soluta suscipit voluptatum! Assumenda, beatae consequuntur inventore, libero mollitia nam nihil perferendis,
            saepe similique vel vero voluptas!
        </div>
        <div>Aut autem culpa cum delectus dicta doloribus eius enim est laudantium libero necessitatibus nemo officia
            pariatur, provident quas quasi vitae! Beatae distinctio expedita laboriosam laudantium, maiores minima odit
            ratione veritatis.
        </div>
        <div>Accusantium aperiam aspernatur deleniti eligendi est laborum perferendis temporibus unde voluptas? Animi
            consectetur culpa, earum esse eum hic illo iure labore laborum molestiae obcaecati sed sit tempore ullam
            velit voluptates?
        </div>
        <div>Dolores nobis omnis rem repudiandae vel! Accusantium doloremque et possimus quod sapiente tempora vitae.
            Illo nesciunt odio possimus saepe similique. Molestiae nemo nostrum quae quod vero. Itaque magni obcaecati
            ullam!
        </div>
        <div>Ab, ad adipisci at harum iusto non obcaecati possimus, praesentium quam recusandae sapiente sit ullam?
            Aperiam blanditiis cum doloribus ducimus ea earum expedita neque non, omnis, qui rem saepe temporibus.
        </div>
        <div>Aperiam cumque, debitis dolor ea exercitationem labore laborum non, quaerat quia quis repudiandae, rerum.
            Aut, deserunt facere maiores odit placeat quae soluta voluptates! Aliquam dignissimos, ex hic labore
            laudantium molestiae?
        </div>
        <div>Ad aliquid amet asperiores assumenda corporis debitis doloribus eaque earum, eius est expedita inventore,
            ipsam minima mollitia neque nostrum nulla numquam porro possimus quasi quia quibusdam repudiandae sequi
            soluta unde?
        </div>
        <div>Accusantium ad aliquid, dicta doloremque ea facilis fuga laudantium nostrum ratione recusandae, totam
            voluptatum? Consectetur corporis cumque deleniti doloribus fugiat nobis nulla quaerat quia quis suscipit!
            Consectetur dolorem quia veritatis.
        </div>
        <div>Adipisci animi aperiam, beatae dolores earum enim fuga iusto minus molestiae molestias nam neque numquam
            quo quos rem rerum veritatis. Consequatur error fugiat illo odio, quod saepe soluta velit voluptas.
        </div>
        <div>Consequatur corporis, dolorum est ex, expedita fuga ipsum labore laboriosam numquam odit perspiciatis quae
            quia repellendus! Aliquam architecto, at aut, dolores, inventore itaque magni nostrum odit omnis sapiente
            ullam voluptates!
        </div>
        <div>Aspernatur atque earum et hic impedit magnam, maiores molestias nihil, odio perspiciatis quod rerum sed
            ullam vel veritatis! Accusantium consequatur eum nihil obcaecati possimus qui sapiente sunt temporibus vero
            voluptatum!
        </div>
        <div>Ab alias atque blanditiis cum cumque dicta dolores hic illo ipsam natus nihil perspiciatis provident
            quibusdam quidem quo quos rerum saepe sapiente sint sit soluta tempora ullam ut, velit voluptatibus?
        </div>
        <div>Alias dolore eos error explicabo, fugiat impedit nemo qui quibusdam repellat rerum. Animi assumenda atque
            dolorum, eligendi expedita facilis fugiat illum ipsa, nemo officiis pariatur qui velit? Beatae, est,
            facilis.
        </div>
        <div>Beatae deleniti id incidunt iure laboriosam maxime modi perspiciatis quae qui quibusdam quos, repellendus!
            Aliquid beatae est minus nihil nobis numquam odit optio qui, quia quidem ratione saepe tempora voluptatum?
        </div>
        <div>Accusamus adipisci assumenda at, aut deserunt error ipsam odit porro provident quaerat, repudiandae
            voluptatum? Iure officia placeat quisquam! Ab ad architecto culpa enim magni molestiae mollitia saepe
            tempora tenetur veritatis!
        </div>
        <div>Aliquam commodi expedita facilis ipsa libero mollitia quibusdam totam vero. A aliquam animi beatae
            blanditiis cumque dolorum ducimus ex harum in minima nisi nostrum, officia omnis quo repellendus, temporibus
            voluptatem.
        </div>
        <div>Accusamus alias commodi, deleniti dolores ea eos ex fugit illum ipsum iure minima minus nemo nisi nobis
            numquam odio placeat quaerat quas, rem rerum saepe sed suscipit velit. Eius, voluptatibus!
        </div>
        <div>Ab amet consequatur delectus deleniti dolor dolorum eligendi error eum facere, facilis illo illum in itaque
            maiores neque nostrum nulla quidem quo reprehenderit rerum similique ullam ut voluptas voluptate voluptatum.
        </div>
        <div>Accusantium adipisci architecto consequatur culpa deleniti dolore doloremque facere fugit illo ipsam iste
            magnam magni maiores nam numquam placeat quibusdam quisquam, reiciendis repellat rerum similique tempore
            totam, voluptatum. Officia, quae.
        </div>
        <div>Alias assumenda dignissimos dolore, eveniet excepturi expedita fuga libero minima molestias nesciunt nulla
            officia quas qui ratione, reprehenderit velit veniam. Ab beatae itaque nam natus obcaecati provident quod
            sed tempora?
        </div>
        <div>Harum, hic itaque magnam minus necessitatibus nulla quam voluptates. Aliquid animi autem, cumque error
            eveniet, ipsam, libero magnam qui quidem quisquam recusandae repellat similique totam ullam ut? Animi,
            illum, sit!
        </div>
        <div>Animi asperiores aspernatur cupiditate laborum quibusdam quidem reprehenderit voluptatem. Aspernatur
            consequuntur delectus incidunt non odit recusandae saepe ut veniam voluptas? Accusamus alias architecto
            facilis iste nemo nobis nulla optio repellat.
        </div>
        <div>Aliquid assumenda aut culpa cupiditate, distinctio dolorem eos eum eveniet, harum id illum incidunt ipsa
            iure maiores mollitia nam nobis officiis quaerat quibusdam quis soluta sunt, voluptas. Mollitia porro, sint?
        </div>
        <div>Aliquid consectetur cupiditate debitis delectus dolore dolores, doloribus eligendi ex, explicabo harum in
            ipsa laborum minima minus, modi natus odit provident qui reiciendis repudiandae rerum sapiente suscipit
            tempora ullam voluptates.
        </div>
        <div>Cumque, eius et maiores natus nostrum ratione? Aliquid ducimus esse maxime minus neque quidem, suscipit
            veniam voluptatibus! Asperiores at corporis culpa, delectus dolor enim fugit, incidunt modi obcaecati
            tempora, unde!
        </div>
        <div>Accusantium animi at consequuntur debitis dicta eaque et expedita, id maxime nulla numquam porro quae
            quidem quo sequi similique temporibus totam, veritatis vitae, voluptatibus! Adipisci dicta hic labore
            possimus quos.
        </div>
        <div>Aut, corporis deleniti itaque laboriosam maiores nostrum porro quisquam quos repellat suscipit. Aut enim
            eum impedit ipsum maxime nesciunt obcaecati quibusdam quos repellendus vero! Atque debitis placeat quis
            quisquam ratione.
        </div>
        <div>Aliquid aut commodi doloremque ea eaque eum explicabo laudantium porro quasi sed! At distinctio, dolor
            error esse fugiat, iusto libero magni, nihil numquam quia quod ratione rem sed suscipit temporibus.
        </div>
        <div>Accusamus aperiam autem cupiditate eaque ex exercitationem illum inventore ipsum itaque iure iusto magni
            maxime neque nostrum officia qui quos rem tempore temporibus, tenetur unde vero, voluptates! Magni quis,
            saepe!
        </div>
        <div>Accusamus cumque dolor exercitationem fuga hic impedit, magni nulla quas vel voluptates? Aperiam et
            laboriosam non porro, possimus quod saepe? Adipisci corporis cum deserunt exercitationem natus odit sunt
            tempora vero.
        </div>
        <div>Corporis deserunt est inventore ipsum necessitatibus pariatur sit! Aliquam beatae cumque debitis
            dignissimos earum, esse expedita ipsa laudantium magni maxime molestias nihil obcaecati possimus quas
            quibusdam reprehenderit voluptatem? Enim, optio.
        </div>
        <div>Aliquid aperiam blanditiis cupiditate delectus distinctio dolor dolorem est eum excepturi facilis fuga
            fugiat illum impedit in inventore laboriosam laborum libero natus, necessitatibus nisi officiis quae quidem
            sequi temporibus vel.
        </div>
        <div>A atque consectetur delectus dicta, dignissimos dolor dolorem doloremque eligendi illum maiores nam nemo
            neque porro quas quibusdam quisquam quod rerum vel veritatis voluptatibus? Cupiditate ipsa neque officiis
            quasi sed.
        </div>
        <div>Adipisci magnam nulla quam recusandae ullam vitae. Animi assumenda ea ex fugit incidunt laboriosam minima
            obcaecati perferendis vitae. Aperiam corporis doloremque ducimus eum excepturi optio perspiciatis placeat
            sint tempora vitae!
        </div>
        <div>Ab accusantium consequatur ducimus et iste ratione repudiandae tenetur veniam. Ipsam repellat tempore
            tenetur. Amet delectus expedita facilis, necessitatibus nisi quisquam repellat similique vel veritatis
            voluptatum. Asperiores consequatur quis rerum.
        </div>
        <div>Ab aperiam earum error, fugit incidunt, maxime nemo non numquam porro praesentium quae quidem ratione
            sapiente? Adipisci assumenda beatae, culpa distinctio exercitationem numquam quis ratione recusandae
            similique unde voluptate voluptatibus.
        </div>
        <div>Adipisci aliquid at commodi consequuntur cum distinctio ea error eum harum illum impedit magni maxime
            molestiae natus nisi nostrum provident quae quaerat rem rerum similique ullam vel, veritatis voluptas
            voluptatum.
        </div>
        <div>Architecto assumenda corporis culpa cumque deserunt distinctio dolor ducimus eaque enim eos eveniet fugiat,
            id iusto labore laboriosam laborum maiores mollitia neque nihil quas quis, reprehenderit sit tempore totam
            voluptas!
        </div>
        <div>Alias aperiam consequatur deleniti dicta dolor dolore doloribus explicabo illo labore libero nesciunt
            officiis, perferendis qui. Ipsam, quae, velit? Accusamus, atque blanditiis delectus eveniet itaque quos vero
            voluptates voluptatibus. Fugit?
        </div>
        <div>Fugiat illum itaque minus provident tenetur veniam vero! Architecto blanditiis dolore ea esse id magnam
            minus quasi qui quibusdam rem? Aperiam consequuntur eius eveniet incidunt itaque nihil nostrum obcaecati
            veniam.
        </div>
        <div>Doloremque facere, quae. Ad architecto autem, cum deserunt earum enim ex in inventore iste laborum mollitia
            necessitatibus nostrum obcaecati odio odit, optio perspiciatis qui quibusdam quis similique tempore unde
            velit?
        </div>
        <div>Adipisci animi consequatur culpa cum deserunt dolorum eius eos est eum eveniet, ex facere harum illum
            itaque neque nihil odit omnis perferendis quas qui quos rerum sint! Perferendis, praesentium, quam.
        </div>
        <div>Dolorum eligendi eos est ex maxime omnis placeat praesentium qui ut veritatis. Dolorum eos eveniet expedita
            fugit, id ipsam, itaque magnam nam natus nemo, nisi omnis quas sed totam vero.
        </div>
    </div>
</body>
</html>